<template>
  <div class="suggest">
    <div class="title">搜索：{{ keywords }}</div>
    <ul>
      <template v-if="suggestList.artists">
        <li
          v-for="v in suggestList.artists"
          :key="v.id"
          @click="$emit('change', v.name)"
        >
          <i></i> 歌手：{{ v.name }}
        </li>
      </template>
      <template v-if="suggestList.albums">
        <li
          v-for="v in suggestList.albums"
          :key="v.id"
          @click="$emit('change', v.name)"
        >
          <i></i> 专辑：{{ v.name }}
        </li>
      </template>
      <template v-if="suggestList.songs">
        <li
          v-for="v in suggestList.songs"
          :key="v.id"
          @click="$emit('change', v.name)"
        >
          <i></i> 歌曲：{{ v.name }}
        </li>
      </template>
    </ul>
  </div>
</template>

<script>
export default {
    name:'SearchSuggest',
    props: ['keywords'],
    data(){
        return {
            suggestList: [],
            isSuccess:true,  //做防抖
        }
    },
    watch:{
        keywords(newVal){
            // console.log("watch keywords==>",newVal);
            this.getSuggest(newVal);
        }
    },
    methods:{
        getSuggest(keyword){
            if(!this.isSuccess) return;
            this.isSuccess=false;
            this.$http.get('/search/suggest',{
                params:{
                    keywords:keyword
                }
            }).then(data=>{
                // console.log(data);
                let result = data.data.result;
                this.suggestList = result;
                this.isSuccess=true
            })
        }
    }
}
</script>

<style lang="less" scoped>
.suggest {
  .title {
    height: 50px;
    margin-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    line-height: 50px;
    color: #507daf;
  }
  ul {
    li {
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: 45px;
      line-height: 45px;
      padding-left: 10px;
      i {
        display: inline-block;
        vertical-align: middle;
        background-position: 0 0;
        background-size: contain;
        background-repeat: no-repeat;
        width: 15px;
        height: 15px;
        background-image: url();
      }
    }
  }
}
</style>